<template>
  <div class="login-container">
    <div class="header">
      <img src="@/assets/logo.png" alt="Logo" class="logo"/>
      <h2>墨香阁后台</h2>
    </div>
    <div>
      <el-button type="primary" @click="toOrderManagement2">订单管理</el-button>
      <el-button type="success" @click="toCustomerManagement">客户管理</el-button>
      <el-button type="warning" @click="toProductManagement">商品管理</el-button>
      <el-button type="danger" @click="toCategoryManagement">类型管理</el-button>
      <el-button type="info" @click="logout">退出</el-button>
    </div>
<div style="background-color: white">
    <router-view></router-view>
</div>
  </div>
</template>

<script>
export default {
  data() {
    return {

    };
  },

  methods: {
    toOrderManagement2() {
      if (this.$route.path !== '/backendmanagement/ordermanagement2') {
        this.$router.push('/backendmanagement/ordermanagement2');
      }
    },
    toCustomerManagement() {
      if (this.$route.path !== '/backendmanagement/customermanagement'){
        this.$router.push('/backendmanagement/customermanagement');
      }
    },
    toProductManagement() {
      if (this.$route.path !== '/backendmanagement/productmanagement'){
        this.$router.push('/backendmanagement/productmanagement');
      }
    },
    toCategoryManagement() {
      if (this.$route.path !== '/backendmanagement/categorymanagement'){
        this.$router.push('/backendmanagement/categorymanagement');
      }
    },
    logout() {
      this.$router.push('/adminhome/homepage'); // 跳转到管理员首页页面
    }
  }
};
</script>

<style scoped>
.login-container {
  text-align: left; /* 将文本对齐方式改为左对齐 */
  padding-left: 5px; /* 添加左侧内边距 */
}

.header {
  display: flex;
  align-items: center; /* 垂直居中对齐 */

}

.logo {
  width: 150px; /* 设置图片宽度 */
  height: auto; /* 保持图片比例 */
  margin-right: 10px; /* 图片与文字之间的间距 */
}
</style>
